<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 p-8">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-4xl font-bold text-white mb-8 text-center">
        Tailwind CSS 测试页面
      </h1>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h2 class="text-xl font-semibold text-gray-800 mb-2">测试卡片 1</h2>
          <p class="text-gray-600">Tailwind CSS 已正确配置！</p>
          <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
            测试按钮
          </button>
        </div>
        
        <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h2 class="text-xl font-semibold text-gray-800 mb-2">测试卡片 2</h2>
          <p class="text-gray-600">响应式设计正常工作</p>
          <button class="mt-4 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
            另一个按钮
          </button>
        </div>
        
        <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h2 class="text-xl font-semibold text-gray-800 mb-2">测试卡片 3</h2>
          <p class="text-gray-600">渐变背景也生效了</p>
          <button class="mt-4 bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded">
            紫色按钮
          </button>
        </div>
      </div>
      
      <div class="mt-8 bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Tailwind CSS 功能测试</h3>
        <div class="flex flex-wrap gap-4">
          <span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm">红色标签</span>
          <span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm">黄色标签</span>
          <span class="px-3 py-1 bg-green-500 text-white rounded-full text-sm">绿色标签</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这个页面用于测试Tailwind CSS是否正常工作
</script>